import Taro, { useLoad } from '@tarojs/taro';
import { View, Text, Swiper, SwiperItem, Image } from '@tarojs/components';
import './index.css';

const images = [
  'https://copyright.bdstatic.com/vcg/creative/62fd36834ba4541aac31214688246b29.jpg',
  'https://wx3.sinaimg.cn/large/0065o4l2ly1hoem5fpf54j31eb0u044y.jpg',
  'https://pic.rmb.bdstatic.com/bjh/events/0877f1741df27c46af1d6529565d04747993.jpeg',
];



export default function Index() {
  return (
    <View className='swiper-container'>
      {/* 轮播图 */}
      <Swiper
        indicatorDots={true}
        autoplay={true}
        interval={3000}
        duration={500}
      >
        {images.map((image, index) => (
          <SwiperItem key={index}>
            <Image src={image} mode='aspectFill' style={{ width: '100%', height: '100%', borderRadius: '7px' }} />
          </SwiperItem>
        ))}
      </Swiper>

      {/* 紧急通知 */}
      <View className='notice'>
        <view className='notice1'>
          <Image src={require('../../images/speaker.png')} />
        </view>
        <view className='notice2'>
          <Text className='notice-text'>紧急通知！！所有居民请于下午3点于...</Text>
        </view>
        <view className='notice3'>
          <Image src={require('../../images/right.png')} />
        </view>
      </View>

      {/* 手机开门 */}
      <View className='phone_door'>
        <view className='phone1'><Image src={require('../../images/phone.png')} /></view>
        <view className='phone1'><Image src={require('../../images/bill.png')} /></view>
        <view className='phone1'> <Image src={require('../../images/maintenance.png')} /></view>
        <view className='phone1'>
          <Image src={require('../../images/profile.png')} />
        </view>
      </View>
      <View className='phone_text'>
        <Text>手机开门</Text>
        <Text>生活缴费</Text>
        <Text>维修上报</Text>
        <Text>询问客服</Text>
      </View>

      {/* 便民服务 */}
      <View className='convenient'>
          <view className='convenient1'>
            <view className='convenient_text'>便民服务</view>
            <view className='convenient_text1'>邻里便民服务 全新上线</view>
          </view>
          <view className='convenient2'><Image src={require('../../images/shop.png')} /></view>
      </View>

      {/* 社区活动 */}
      <View className='lx_community'>
        <view className='lx_community1'>社区活动</view>
        <view className='lx_community2'>查看全部<Image src={require('../../images/right.png')} /></view>
      </View>

      {/* 渲染页面 */}
      <View className='home'>
        <view className='home1'></view>
        <view className='home2'></view>
      </View>
    </View>
  );
}
